import React, {useState} from 'react';
import {
  Alert,
  Animated,
  TouchableWithoutFeedback,
  Text,
  View,
} from 'react-native';
import bx from '../images/heart.png';
import hx from '../images/heart-select.png';

const heart = ({num}) => {
  const [color, setcolor] = useState(false);
  const [scale] = useState(new Animated.Value(0));
  return (
    <View
      style={{
        alignItems: 'center',
      }}>
      <TouchableWithoutFeedback
        onPress={() => {
          scale.setValue(0);
          Animated.timing(scale, {
            toValue: 2,
            duration: 400,
            useNativeDriver: true,
          }).start();
          setcolor(!color);
        }}>
        <Animated.Image
          source={color ? hx : bx}
          style={{
            transform: [
              {
                scale: scale.interpolate({
                  inputRange: [0, 1, 2],
                  outputRange: [1, 0.7, 1],
                }),
              },
            ],
          }}
        />
      </TouchableWithoutFeedback>
      <Text style={{color: '#fff', fontWeight: 'bold'}}>{num}</Text>
    </View>
  );
};

heart.defaultProps = {
  num: 0,
};

export default heart;
